<template>
  <a-table class="user-table" :dataSource="users" :columns="columns">
    <template #bodyCell="{column, record}">
      <template v-if="column.key === 'status'">
        <a-tag
            :color="tagMapGet(statusMap, record.status).color">
          {{tagMapGet(statusMap, record.status).text}}
        </a-tag>
      </template>
      <template v-if="column.key === 'level'">
        <a-tag
            :color="tagMapGet(levelMap, record.level).color">
          {{tagMapGet(levelMap, record.level).text}}
        </a-tag>
      </template>
      <template v-if="column.key === 'operation'">
        <a-button type="link" @click="emit('permission', record)">设置权限</a-button>
        <a-button type="link" @click="" disabled>禁用账户</a-button>
        <a-popconfirm @confirm="emit('delete', record.id)"
                      okType="danger"
                      okText="确认"
                      cancelText="取消"
                      title="您确定要删除这个用户吗">
          <a-button type="link" danger >删除账户</a-button>
        </a-popconfirm>
      </template>
    </template>
  </a-table>
</template>

<script setup>
defineProps({
  users: {
    type: Array,
    required: true,
    default: []
  }
})
const emit = defineEmits(['delete', 'permission'])
/**
 * Tag属性获取
 */
const statusMap = [
  {value: 0, color: 'green', text: '正常'},
  {value: 1, color: 'orange', text: '已禁用'}
]

const levelMap = [
  {value: 0, color: 'blue', text: '系统管理员'},
  {value: 1, color: 'green', text: '普通用户'},
  {value: 2, color: 'green', text: '创作者'},
]

const tagMapGet = (map, value) => {
  return map.find(i => i.value === value)
}

const columns = [
  {
    key: 'id',
    title: 'UserID',
    dataIndex: 'id',
  },
  {
    key: 'name',
    title: '用户名',
    dataIndex: 'name'
  },
  {
    key: 'email',
    title: '用户邮箱',
    dataIndex: 'email'
  },
  {
    key: 'status',
    title: '状态',
    dataIndex: 'status'
  },
  {
    key: 'level',
    title: '用户等级',
    dataIndex: 'level'
  },
  {
    key: 'created_at',
    title: '创建时间',
    dataIndex: 'created_at'
  },
  {
    key: 'operation',
    title: '操作'
  }
]
</script>

<style scoped>

</style>